<template>
<div  class="mui-content mui-scroll-wrapper" style="padding-top: 0px">
    <header  class="mui-bar mui-bar-nav bg-color">
        <span @tap="goback" class="iconfont icon-fanhui"></span> 
        <h1  class="mui-title">订单详情</h1> 
        <!-- <div @tap="goCrmChat" class="mui-icon-extra icon-33 mui-pull-right Tit" style="padding-top:5px;padding-bottom:5px;line-height:29px;">
            <span class="customer" v-if="($store.state.appChat.crmRoomData.room_id == currentCar.orderId) && $store.state.appChat.crmRoomData.cust_msg_count"></span>
        </div> -->
    </header>
    <div class="mui-scroll">
        <div class="lineItem">
            <!-- 订单详情  -->
            <CrossLine></CrossLine>
            <ul style="background: #fff;">
                <img src="static/img/di.png" style="position:absolute;width:100%"/>
                <li class="mui-table-view-cell" style="padding-top: 20px;">  
                    <div>
                    <span class="icon-dingw"></span>
                    <div class="address-info">
                        <div class="address-text">
                        <span class="address-name">{{$store.getters.user.name}}</span>
                        <span style="margin-left:30px;font-size:13px;">{{$store.getters.user.mobile}}</span>
                        </div>
                        <span class="usertit">地址:</span> 
                        <span  class="userpams">{{$store.getters.user.area+$store.getters.user.address}}</span>
                    </div>
                    </div>
                </li>
            </ul>
            <!-- 流程图 -->
            <div class="spinner" @tap="switchSpinnerStatus"> 
                <span class="left">
                    <span class="icon-liucheng-01"></span>
                    <span style="margin-left:5px;display:inline-block">{{descriptionTime}}</span>
                    <span style="margin-left:10px">{{title}}</span>
                </span>
                <span class="right i-c icon-you-01"></span>
            </div>
            <div class="schedule" style="width:100%;background:#fff;" v-show="spinnerStatus">
                <div style="padding:10px 0px 0px 40px">
                    <el-steps :space="55" direction="vertical" :active="directionlist.length">
                        <div  v-for="v in directionlist">
                            <el-step  :title="v.title" :description="v.descriptionTime">   
                            </el-step>
                        </div>                
                    </el-steps>
                </div>
            </div>
            <div class="carlist biding">
                <div class="c">
                    <ul class="mui-table-view">
                        <li @tap="goCarDetail(currentCar.carSeriesId, currentCar.carId)"> 
                            <crossLine></crossLine>
                            <div class="lstTop">
                                <div class="titpic">
                                    <img style="float:left;" src="static/img/hqgic.png" alt=""><span style="float:left;color:#333333;">江苏环球港汽车城</span><!--<span style="float:right;color:#ff6a27;">本车系10人在拼单</span>-->
                                </div>
                            </div>
                            <div class="lst">
                                <div class="lstImg" v-if="currentCar.pic==null || currentCar.pic==''">
                                    <img src="static/img/noCarPic.png">
                                </div>
                                <div class="lstImg" v-else>
                                    <img :src="$store.state.appData.imgUrl+currentCar.pic">
                                </div>
                                <div class="lstMsg">
                                    <p class="carName">{{currentCar.carName}}</p>
                                    <p class="carColor">颜色:<span>{{currentCar.appearanceColor}}</span>
                                       <!--  <span class="orderPrice">￥139900</span> -->
                                    </p>
                                    <!-- <p class="carPrice">指导价:{{currentCar.guidePrice}}万起 
                                        <span style="color:#ff6a27;float:right;">{{getBiddingStatus(currentCar.state)}}</span>
                                    </p> -->
                                </div>
                            </div>
                        </li>
                         <!-- 上牌点 -->
                        <li style="margin:0px 0px 0px 0px;height:30px;">
                            <div class="priceInfo" v-if="currentCar.license">
                                <span class="left">上牌地点:</span>
                                <span class="right"> {{currentCar.license}}</span>
                            </div>
                            <div class="priceInfo" v-else>
                                <span class="left">上牌地点:</span>
                                <span class="right">无</span>
                            </div>
                            <!-- 保险 -->
                            <div class="priceInfo" v-show="orderInfo.isSurance != null || orderInfo.isSurance != ''">
                                <span class="left">购买保险:</span>
                                <span class="right">{{handleIsSurance(currentCar.isSurance)}}</span>
                                <!-- <input style="padding:8px 0px 10px 0px ;font-size:0.7rem;" v-model="isSurance"  maxlength="20" type="text" class="mui-input-clear"  readonly="readonly"> -->
                            </div>
                            <!-- 贷款 -->
                            <div class="priceInfo"  v-show="orderInfo.isLoan != null || orderInfo.isLoan != ''">
                                <span class="left">申请贷款:</span>
                                <span class="right">{{handleIsloan(currentCar.isLoan)}}</span>
                                <!-- <input style="padding:8px 0px 10px 0px ;font-size:0.7rem;" v-model="isloan"  maxlength="20" type="text" class="mui-input-clear"  readonly="readonly"> -->
                            </div>
                            <div class="priceInfo" v-show="orderInfo.salesConsultantName">
                                <span class="left">导购人员:</span>
                                <span class="right">{{orderInfo.salesConsultantName}}</span>
                            </div>
                            <!-- 备注 -->
                            <div class="priceInfo" v-if="BidInfo.remark ==''">
                                <span class="left">用户备注:</span>
                                <div style="padding:8px 0px 10px 0px ;font-size:0.7rem;display:inline-block;line-height:1.1">
                                     {{BidInfo.remark}}
                                </div>
                            </div>
                        </li>
                        <div style="clear:both"></div>
                        <li style="border-bottom: 1px solid #e9e9e9;border-top: 1px solid #e9e9e9;margin-top:10px">
                            <div class="priceInfo" v-show="crowdInfo.orderPrice && currentCar.license && currentCar.aplFee">
                                <span class="left">上牌服务费:</span>
                                <span class="right">￥{{currentCar.aplFee}}</span>
                            </div>
                            <div class="priceInfo" v-show="crowdInfo.orderPrice && currentCar.isLoan && currentCar.finFee">
                                <span class="left">金融服务费:</span>
                                <span class="right">￥{{currentCar.finFee}}</span>
                            </div>
                            <div class="priceInfo" v-show="BidInfo.bidPirce">
                                <span class="left">询价金额:</span>
                                <span class="right">￥{{initPrice(BidInfo.orderPrice)}}</span>
                            </div>
                            <div class="priceInfo" v-show="crowdInfo.orderPrice">
                                <span class="left">拼单询价金额:</span>
                                <span class="right">￥{{initPrice(crowdInfo.orderPrice)}}</span>
                            </div>
                            <div class="priceInfo"  v-show="currentCar.downPayment">
                                <span class="left">资源锁定金金额:</span>
                                <span class="right" >￥{{initPrice(currentCar.downPayment)}}</span>
                            </div>
                            <div class="priceInfo" v-show="currentCar.orderPrice">
                                <span class="left">裸车价:</span>
                                <span class="right" style="color:#ff6a27">￥{{initPriceYuan(currentCar.orderPrice)}}</span>
                            </div>
                        </li>
                        <li style="border-bottom: 1px solid #e9e9e9;">
                            <div class="priceInfo" v-if="orderInfo.dealerName">
                                <span class="left">经销商名:</span>
                                <span class="right"> {{orderInfo.dealerName}}</span>
                            </div>
                            <div class="priceInfo" v-if="orderInfo.dealerTel">
                                <span class="left">经销商联系方式:</span>
                                <span class="right"> {{orderInfo.dealerTel}}</span>
                            </div>
                        </li>
                        <!-- 联系导购 -->
                        <li @tap="goCrmChat" style="margin:0px 0px 0px 0px;padding-left:15px;padding-right:10px;border-bottom: 1px solid #e9e9e9;text-align:center;vertical-align:top; ">
                            <span class="mui-icon-extra icon-33" style="padding-top:5px;color:#3a962a; padding-bottom:5px;line-height:29px;"></span>
                            <span class="customer" v-if="($store.state.appChat.crmRoomData.room_id == currentCar.orderId) && $store.state.appChat.crmRoomData.cust_msg_count"></span>
                            <span class="guide">联系导购</span>
                        </li>
                        <CrossLine></CrossLine>
                        <li style="padding-top:10px;padding-bottom:10px">
                            <div class="orderInfo" v-show="orderInfo.orderId">
                                <span class="left">订单编号:</span>
                                {{orderInfo.orderId}}
                            </div>
                            <div class="orderInfo" v-show="orderInfo.payType">
                                <span class="left">支付类型:</span>
                                {{orderInfo.payType}}
                            </div>        
                            <div class="orderInfo" v-show="orderInfo.serialNumber">
                                <span class="left">支付流水号:</span>
                                {{orderInfo.serialNumber}}
                            </div>
                            <div class="orderInfo" v-show="BidInfo.submission">
                                <span class="left">询价支付时间:</span>
                                {{BidInfo.submission}}
                            </div>
                            <div class="orderInfo" v-show="crowdInfo.submissionDate">
                                <span class="left">拼单询价支付时间:</span>
                                {{crowdInfo.submissionDate}}
                            </div>
                            <div class="orderInfo"  v-show="orderInfo.orderInfo">
                                <span class="left">资源锁定金支付时间:</span>
                                {{orderInfo.orderInfo}} 
                            </div>
                            <div class="orderInfo" v-show="orderInfo.deliveryTimeint">
                                <span class="left">订单支付时间:</span>
                                {{orderInfo.deliveryTimeint}}
                            </div>
                            <!-- <div class="orderInfo" style="margin-bottom:0px">
                                <span class="left" >交车时间:</span>
                            </div> -->
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <nav class="mui-bar mui-bar-tab footer" v-show="currentCar.state==0">
        <div class="placeOrder"  @tap="goPayment(currentCar)">去付款</div>
    </nav>
</div>
</template>

<script>
    import CrossLine from '@/components/base/cross-line/cross-line'
    import utils from '@/utils/utils'
    import mui from "static/js/mui"
    import storage from '@/utils/localstorage'
    import {addServiceToCustomer} from '@/api/user'
    import {getCustomerOrderAction, getCustomerOrderInfo, getBidOrderInfo, findByOrderIdShareBille} from "@/api/order"
    // import '_element-ui@1.4.13@element-ui/lib/theme-default/index.css'
    export default {
        components: {
            CrossLine
        },
        data() {
            return {
                zanwu: '暂无',
                spinnerStatus: false,
                descriptionTime: '',
                title: '',
                currentCar: {},
                directionlist: [
    
                ],
                orderInfo:{},
                BidInfo:{},
                crowdInfo:{},
                obj:{
                    carSeriesId:"",
                    carId: '',
                    customerId:this.$store.getters.user.id
                }
            }
        },
        props: {},
        watch: {},
        methods: {
            goback() {
                history.go(-1)
            },
            goCrmChat() {
                this.orderInfo['salerId'] = this.orderInfo.salesConsultantId
                let that = this
                if(!this.orderInfo['salerId']){
                    mui.alert('您未绑定客服,确认跳转客服', '', ['确定'],function() {
                    let type = storage.getLocalstorage('user').serviceId
                    if(type){
                        that.$router.push({
                            name: "chat",
                            params: { roomType: type }
                        })
                    }else{
                        if(type == null){
                        type = (Math.random() + 1).toFixed(0)
                        }
                        let mobile = storage.getLocalstorage('user').mobile
                        if(!mobile){
                        mui.alert('用户未注册', "消息提示", ['确定'],function() {
                            that.$router.push('/login')
                        },'div'); 
                        }else{
                        let data = {serviceId: type, mobile: mobile}
                        addServiceToCustomer(data).then(res=>{
                            storage.setLocalstorage('user', res.data)
                        })
                        that.$router.push({
                            name: "chat",
                            params: { roomType: type }
                        })
                        }
                    }
                    },'div');
                }else{
                    this.$router.push({
                        name: 'crmChat',
                        params: {
                            roomData: this.orderInfo
                        }
                    })
                }
            },
            getParams() {
                //获取路由参数'
                let routeVal = this.$route.params
                if(JSON.stringify(routeVal)!=="{}"){
                    if(typeof(routeVal.currentCar) !== 'undefined'){
                        this.currentCar = routeVal.currentCar
                        /* //console.log(this.currentCar) */
                    }
                }
            },
            switchSpinnerStatus(){
                this.spinnerStatus = !this.spinnerStatus
            },
            init(){
                this.handleGetCustomerOrderAction()
                this.handelGetCustomerOrderInfo()
                this.handelGetBidOrderInfo()
                this.handelFindByOrderIdShareBille()
            },
            initPrice(formartPrice) {
                let price = utils.formatMoney(formartPrice,2)
                return price
            },
            initPriceYuan(formartPrice) {
                let price = utils.formatMoney(formartPrice, 2,status = 0)
                return price
            },
            formatTime(time){
                return utils.time.formatDatetwo(time)
            },
            handelGetBidOrderInfo() {
                //获取竞价用户信息
                getBidOrderInfo(this.currentCar).then( res=> {
                    this.BidInfo = res.data.bidCar
                    if(this.BidInfo.submission){
                        this.BidInfo.submission = utils.time.formatDatetwo(this.BidInfo.submission)
                    }
                })
            },
            handleGetCustomerOrderAction() {
                //获取用户行为
                getCustomerOrderAction(this.currentCar).then( res=> {
                    try{
                        for( let key in res.data.action){
                            let direction = {'title':'','descriptionTime':''}
                            switch(key){
                                case '1':
                                    direction['title'] = '进入询价'
                                    direction['descriptionTime'] = utils.time.formatDatetwo(res.data.action[key])
                                    break
                                case '2':
                                    direction['title'] = '已支付询价金'
                                    direction['descriptionTime'] = utils.time.formatDatetwo(res.data.action[key])
                                    break
                                case '3':
                                    direction['title'] = '进入拼单'
                                    direction['descriptionTime'] = utils.time.formatDatetwo(res.data.action[key])
                                    break
                                case '4':
                                    direction['title'] = '已支付拼单金'
                                    direction['descriptionTime'] = utils.time.formatDatetwo(res.data.action[key])
                                    break
                                case '5':
                                    direction['title'] = '已转入拼单'
                                    direction['descriptionTime'] = utils.time.formatDatetwo(res.data.action[key])
                                    break
                                case '6':
                                    direction['title'] = '已转入订单'
                                    direction['descriptionTime'] = utils.time.formatDatetwo(res.data.action[key])
                                    break
                                case '7':
                                    direction['title'] = '已付资源锁定金，等待联系'
                                    direction['descriptionTime'] = utils.time.formatDatetwo(res.data.action[key])
                                    break
                                case '8':
                                    direction['title'] = '订单失效'
                                    direction['descriptionTime'] = utils.time.formatDatetwo(res.data.action[key])
                                    break

                            }
                            this.directionlist.push(direction)
                        }
                        this.descriptionTime = this.directionlist[this.directionlist.length-1].descriptionTime
                        this.title = this.directionlist[this.directionlist.length-1].title
                    }catch(e){
                        console.log('获取行为失败:'+e)
                    }
                })
            },
            handelGetCustomerOrderInfo() {
                //获取用户信息
                getCustomerOrderInfo(this.currentCar).then( res=> {
                    console.log(res.data)
                    this.orderInfo = res.data.carOrder
                    ////console.log(this.orderInfo.orderTimeint)
                    this.orderInfo.orderTimeint = utils.time.formatDatetwo(this.orderInfo.orderTimeint)
                })
            },
            handelFindByOrderIdShareBille() {

                findByOrderIdShareBille(this.currentCar).then(res=>{
                    console.log(res)
                    this.crowdInfo = res.data.shareBill
                    try{
                        this.crowdInfo.submissionDate = utils.time.formatDatetwo(this.crowdInfo.submissionDate)
                    }catch(e){
                        console.log('获取拼单数据错误:'+ e)
                    }
               })
            },
            goCarDetail(carSeriesId, carId){
                this.obj.carSeriesId=carSeriesId
                this.obj.carId = carId
                //this.$store.dispatch('updateIsAuth', true)
                this.$store.dispatch('showCarDetails',this.obj)
                this.$router.push({
                    path: "/modelsOffer",
                })
            },
            //如果订单支付失败 则重新支付
            goPayment(v) {
                //console.log(v)
                this.$router.push({
                    name: "payAgain",
                    params: {
                        orderId:v.serialNumber,
                    }
                })
            },
            handleIsSurance(value){
                if(value == '1'){
                    return '是'
                }
                else{
                    return '否'
                }
            },
            handleIsloan(value){
                if(value == '1'){
                    return '是'
                }
                else{
                    return '否'
                }
            }
        },
        filters: {},
        computed: {
        },
        created() { 
            this.getParams()
            this.init()
        },
        mounted() {
            //初始化mui
			mui.init({
                keyEventBind: {
                backbutton: true  //关闭back按键监听
                }
            })
            mui.back = function () {
                history.go(-1)
            }
			//主界面和侧滑菜单界面均支持区域滚动；
			 mui('.mui-scroll-wrapper').scroll({
                scrollY: true, //是否竖向滚动
                scrollX: false, //是否横向滚动
                startX: 0, //初始化时滚动至x
                startY: 0, //初始化时滚动至y
                indicators: false, //是否显示滚动条
                deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
                bounce: false //是否启用回弹
            });
        },
        destroyed() { }
    }

</script>


<style lang="scss" scoped>
    @import '~static/css/index.css';
    /*车型选择*/
    .mui-input-row label {
        font-family: "Helvetica Neue", Helvetica, sans-serif;
        line-height: 1.1;
        float: left;
        width: 45px;
        padding: 12px 0px 10px 3px;
        font-size: 0.7rem;
        position: relative;
        left: -2px;
    }
    .mui-input-row label ~ input {
        float: left;
        padding-left: 10px !important;
    }
    .carlist {
        width: 100%;
        .lst {
            width: 100%;
            background: #fbfbfb;
            overflow: hidden;
            padding: 10px 12px 12px 12px;
            .lstImg {
                width: 38%;
                float: left;
                text-align: center;
                img {
                    width:120px;
                    vertical-align: middle;
                }
            }
            .lstMsg {
                width:62%;
                float: left;
                height: 100%;
                padding: 6px 0px 5px 15px;
                p {
                    text-overflow: ellipsis;
                    overflow: hidden;
                    word-wrap: break-word;
                    word-break: normal;
                    margin-bottom: 10px;
                }
            }
        }
        .lstbottom {
            width: 100%;
            background: #fff;
            overflow: hidden;
            padding: 0px 12px 0px 12px;
            p {
                margin-bottom: 0px;
                line-height: 35px;
            }
        }
        .lstTop{
            width:100%;
            background:#fff;
            font-size:0.6rem;
            line-height:36px;
            .titpic {
                overflow:hidden;
                padding:0px 12px 0px 8px;
                img{
                    width:36px;
                    height:36px;
                    margin-right:5px;
                    margin-top:3px;
                }
            }
            
        }
    }
    .carName {
        font-size: 0.7rem;
        color: #333;
        line-height: 15px;
        height: 28px;
    }

    .carColor {
        font-size: 0.6rem;
        line-height: 15px;
    }

    .carPrice {
        font-size: 0.6rem;
        line-height: 15px;
    }

    .carNaked {
        text-align: right;
        border-bottom: 1px solid #f0f0f0;
        font-size: 0.7rem;
        color: #333;
    }
    .orderPrice{
        float:right;

    }
    .priceInfo{
        width:100%;
        height:26px;
        margin-top:5px;
    }
    .priceInfo .left{
        float:left;
        margin-left:15px;
        color:#333333;
        font-size: 13px;
    }
    .priceInfo .right{
        float:right;
        margin-right:12px;
    }
    .orderInfo {
        width:100%;
        margin-bottom:10px;
        height:12px;
        line-height: 12px;
    }
    .orderInfo .left{
        float:left;
        margin-left:15px;
        color:#666666;

    }
    //地址
    .icon-dingw{
    display: inline-block;
    font-size:20px;
    float:left;
    padding-top:10px;
    }
    .address-info{
    display: inline-block;
    margin-left:10px;
    width:80%
    }
    .address-name{
    font-size:14px;
    }
    .mui-table-view-cell:last-child:after {
        height: 0;
    }
    .i-c {
    float:right;
    font-size: 1.1rem;
    height:100%;
    padding-top:10px;
    position: relative;
    margin-right: 10px;
    }
    .userpams{
    font-size:12px;
    }

    //下拉组件
    .spinner{
        width:100%;
        height:40px;
        background: #fff;
        border-top: 1px solid #e9e9e9;
    }
    .spinner .left{
        height:40px;
        line-height: 40px;
        margin-left: 15px;
        color: #ff6a27;
    }
    .spinner .right{
       transform:rotate(90deg);
       -ms-transform:rotate(90deg); 	/* IE 9 */
       -moz-transform:rotate(90deg); 	/* Firefox */
       -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
       -o-transform:rotate(90deg); 	/* Opera */
    }
    .icon-liucheng-01{
        font-size:22px;
        position: relative;
        top: 5px;
        display:inline-block;      
    }
    .footer{
        background-color: #fff;
        border-top: 1px solid #ddd;
        border-bottom: 0px solid #ddd;
        box-shadow: 0 0 0px #d2d2d2;
    }
    /*转入拼单*/
    .affirmCrowdorder {
        border-radius: 3px;
        border: 1px solid #ff6a27;
        color: #ff6a27;
        position: absolute;
        right:80px;
        padding: 0px 5px 0px 5px;
        font-size: 0.6rem;
    }
    /*立即订单*/
    .placeOrder{
        background:#ff6a27;
        color: #fff;
        position: absolute;
        height:50px;
        line-height:50px;
        text-align: center;
        width:30%;
        right:0px;
        font-size: 0.75rem;
        border: 1px solid #ff6a27;
    }
    .lineItem{
        margin-bottom:50px;
    }
    /* 联系导购 */
    .guide {
        font-size:16px;
        line-height:29px;
        display:inline-block;
        position:relative;
        vertical-align:top;
        padding-top:5px;
        margin-left:8px;
        padding-bottom: 5px;
    }
    
    .icon-fanhui {
        line-height: 43px;
        font-size: 0.9rem;
        width: 43px;
    }
    /* 客服 */
    .customer {
        position: absolute;
        display: inline-block;
        margin-top: 8px;
        margin-left: -10px;
        width:8px;
        height:8px;
        background: #ff6a27;
        border-radius:4px;
        font-size: 10px;
    }
</style>